<!DOCTYPE html>
<!--**
 *Created by wf_H on 2018/8/6.
 *by:web_hwf@sina.com
 *-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>工作台-工作中心</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="../style/dist/zui@1.8.1/css/zui.min.css">
    <link rel="stylesheet" href="../style/dist/zui@1.8.1/css/zui-theme.css">
    <link rel="stylesheet" href="../style/dist/hover.css">

    <link rel="stylesheet" href="../style/h-base.css">
    <link rel="stylesheet" href="../style/h-index.css">
</head>
<body class="childrenBody">

<!--nav 部件-->
<div class="nav_list">
    <div class="text_title">产品与服务</div>
    <a href="javascript:;" class="text_item active"><span>我提交的工单（0）</span></a>
    <a href="javascript:;" class="text_item "><span>我的已完结工单（3）</span></a>
    <a href="javascript:;" class="text_item "><span>我回复的工单（2）</span></a>
    <a href="javascript:;" class="text_item "><span>组内未完成工单（5）</span></a>

    <button class="btn btn-primary pull-right" style="margin-top: 10px;margin-left: 10px"><i class="icon_img_06"></i>查看工单模板</button>
    <button class="btn btn-primary btn_add pull-right" style="margin-top: 10px"><i class="icon_img_01"></i>新增客户关系</button>
</div>

<!--选项卡-->
<div class="ssgl_list">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            <div class="ssgl_item hvr-outline-in">
                <div class="text_top h_text_sl_1  color_01">
                    湖南省总工会 <span class="alt_text">程度：紧急</span>
                </div>
                <div class="col-xs-6 h_text_sl_1">编号：3210</div>
                <div class="col-xs-6 h_text_sl_1">内容：<strong>确认合同2013041 并审核</strong></div>
                <div class="col-xs-6 h_text_sl_1">前个流转站：张小花（项目部）</div>
                <div class="col-xs-6 h_text_sl_1">状态：<strong>未开始</strong></div>
                <div class="col-xs-6 h_text_sl_1"></div>
                <div class="col-xs-6 h_text_sl_1">工单来源：<strong>非系统</strong></div>

                <div class="footer_list">

                    <a href="javascript:;" class="hvr-underline-from-center">
                        <div class="item_btn">
                            <i class="icon_img_03"></i>
                            流水信息
                        </div>
                    </a>
                    <a href="javascript:;" class="hvr-underline-from-center">

                    </a>
                    <a href="javascript:;" style="flex: 2">
                        <button class="btn btn-primary pull-right" style="margin:6px 10px 0">回复问题</button>
                        <button class="btn btn-primary btn_add pull-right" style="margin-top: 6px">开始处理</button>
                    </a>

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            <div class="ssgl_item hvr-outline-in">
                <div class="text_top h_text_sl_1  color_01">
                    湖南省总工会 <span class="alt_text">程度：紧急</span>
                </div>
                <div class="col-xs-6 h_text_sl_1">编号：3210</div>
                <div class="col-xs-6 h_text_sl_1">内容：<strong>确认合同2013041 并审核</strong></div>
                <div class="col-xs-6 h_text_sl_1">前个流转站：张小花（项目部）</div>
                <div class="col-xs-6 h_text_sl_1">状态：<strong>未开始</strong></div>
                <div class="col-xs-6 h_text_sl_1"></div>
                <div class="col-xs-6 h_text_sl_1">工单来源：<strong>非系统</strong></div>

                <div class="footer_list">

                    <a href="javascript:;" class="hvr-underline-from-center">
                        <div class="item_btn">
                            <i class="icon_img_03"></i>
                            流水信息
                        </div>
                    </a>
                    <a href="javascript:;" class="hvr-underline-from-center">
                        <div class="item_btn">
                            <i class="icon_img_04"></i>
                            下载合同
                        </div>
                    </a>
                    <a href="javascript:;" style="flex: 2">
                        <button class="btn btn-primary pull-right" style="margin:6px 10px 0">回复问题</button>
                        <button class="btn btn-primary btn_add pull-right" style="margin-top: 6px">开始处理</button>
                    </a>

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            <div class="ssgl_item hvr-outline-in">
                <div class="text_top h_text_sl_1  color_01">
                    湖南省总工会 <span class="alt_text">程度：紧急</span>
                </div>
                <div class="col-xs-6 h_text_sl_1">编号：3210</div>
                <div class="col-xs-6 h_text_sl_1">内容：<strong>确认合同2013041 并审核</strong></div>
                <div class="col-xs-6 h_text_sl_1">前个流转站：张小花（项目部）</div>
                <div class="col-xs-6 h_text_sl_1">状态：<strong>未开始</strong></div>
                <div class="col-xs-6 h_text_sl_1"></div>
                <div class="col-xs-6 h_text_sl_1">工单来源：<strong>非系统</strong></div>

                <div class="footer_list">

                    <a href="javascript:;" class="hvr-underline-from-center">
                        <div class="item_btn">
                            <i class="icon_img_03"></i>
                            流水信息
                        </div>
                    </a>
                    <a href="javascript:;" class="hvr-underline-from-center">

                    </a>
                    <a href="javascript:;" style="flex: 2">
                        <button class="btn btn-primary pull-right" style="margin:6px 10px 0">回复问题</button>
                        <button class="btn btn-primary btn_add pull-right" style="margin-top: 6px">开始处理</button>
                    </a>

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            <div class="ssgl_item hvr-outline-in">
                <div class="text_top h_text_sl_1  color_01">
                    湖南省总工会 <span class="alt_text">程度：紧急</span>
                </div>
                <div class="col-xs-6 h_text_sl_1">编号：3210</div>
                <div class="col-xs-6 h_text_sl_1">内容：<strong>确认合同2013041 并审核</strong></div>
                <div class="col-xs-6 h_text_sl_1">前个流转站：张小花（项目部）</div>
                <div class="col-xs-6 h_text_sl_1">状态：<strong>未开始</strong></div>
                <div class="col-xs-6 h_text_sl_1"></div>
                <div class="col-xs-6 h_text_sl_1">工单来源：<strong>非系统</strong></div>

                <div class="footer_list">

                    <a href="javascript:;" class="hvr-underline-from-center">
                        <div class="item_btn">
                            <i class="icon_img_03"></i>
                            流水信息
                        </div>
                    </a>
                    <a href="javascript:;" class="hvr-underline-from-center">
                        <div class="item_btn">
                            <i class="icon_img_04"></i>
                            下载合同
                        </div>
                    </a>
                    <a href="javascript:;" style="flex: 2">
                        <button class="btn btn-primary pull-right" style="margin:6px 10px 0">回复问题</button>
                        <button class="btn btn-primary btn_add pull-right" style="margin-top: 6px">开始处理</button>
                    </a>

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            <div class="ssgl_item hvr-outline-in">
                <div class="text_top h_text_sl_1  color_01">
                    湖南省总工会 <span class="alt_text">程度：紧急</span>
                </div>
                <div class="col-xs-6 h_text_sl_1">编号：3210</div>
                <div class="col-xs-6 h_text_sl_1">内容：<strong>确认合同2013041 并审核</strong></div>
                <div class="col-xs-6 h_text_sl_1">前个流转站：张小花（项目部）</div>
                <div class="col-xs-6 h_text_sl_1">状态：<strong>未开始</strong></div>
                <div class="col-xs-6 h_text_sl_1"></div>
                <div class="col-xs-6 h_text_sl_1">工单来源：<strong>非系统</strong></div>

                <div class="footer_list">

                    <a href="javascript:;" class="hvr-underline-from-center">
                        <div class="item_btn">
                            <i class="icon_img_03"></i>
                            流水信息
                        </div>
                    </a>
                    <a href="javascript:;" class="hvr-underline-from-center">

                    </a>
                    <a href="javascript:;" style="flex: 2">
                        <button class="btn btn-primary pull-right" style="margin:6px 10px 0">回复问题</button>
                        <button class="btn btn-primary btn_add pull-right" style="margin-top: 6px">开始处理</button>
                    </a>

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
            <div class="ssgl_item hvr-outline-in">
                <div class="text_top h_text_sl_1  color_01">
                    湖南省总工会 <span class="alt_text">程度：紧急</span>
                </div>
                <div class="col-xs-6 h_text_sl_1">编号：3210</div>
                <div class="col-xs-6 h_text_sl_1">内容：<strong>确认合同2013041 并审核</strong></div>
                <div class="col-xs-6 h_text_sl_1">前个流转站：张小花（项目部）</div>
                <div class="col-xs-6 h_text_sl_1">状态：<strong>未开始</strong></div>
                <div class="col-xs-6 h_text_sl_1"></div>
                <div class="col-xs-6 h_text_sl_1">工单来源：<strong>非系统</strong></div>

                <div class="footer_list">

                    <a href="javascript:;" class="hvr-underline-from-center">
                        <div class="item_btn">
                            <i class="icon_img_03"></i>
                            流水信息
                        </div>
                    </a>
                    <a href="javascript:;" class="hvr-underline-from-center">
                        <div class="item_btn">
                            <i class="icon_img_04"></i>
                            下载合同
                        </div>
                    </a>
                    <a href="javascript:;" style="flex: 2">
                        <button class="btn btn-primary pull-right" style="margin:6px 10px 0">回复问题</button>
                        <button class="btn btn-primary btn_add pull-right" style="margin-top: 6px">开始处理</button>
                    </a>

                </div>
            </div>
        </div>
    </div>
    <div class="row" style="text-align: center">

        <ul class="pager">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
            <li><a href="#">12</a></li>
            <li class="next"><a href="#">下一页 »</a></li>
            <div class="input-group" style="width: 100px;float: left;margin-left: 10px">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">GO</button>
                </span>
            </div>
            <li><div class="pager-label">共 <strong>89</strong> 页</div></li>
        </ul>


    </div>
</div>


<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../style/dist/zui@1.8.1/js/zui.min.js"></script>

<!--复选美化-->
<script src="../style/dist/icheck.min.js"></script>
<script>
    /*初始化多选美化*/
    $(document).ready(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})
    });

    $(function () {
        $('.nav_list').on('click', 'a', function () {
            $(this).addClass('active').siblings().removeClass('active');
        })


    })
</script>
</body>
</html>